<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function faceSelect() {
            var selectObj = document.getElementById("faceSelect");
            // //弹出消息框 会阻塞
            // alert(selectObj.value);
            // //在控制台打印
            // console.log("sssssssssssssssssssssss")
            var  imgObj=document.getElementById("faceImg")
            if (selectObj.value=="1"){
                imgObj.src="img/xy7.png";
            }else if (selectObj.value=="2"){
                imgObj.src="img/xy2.png"
            }else if (selectObj.value=="3"){
                imgObj.src="img/xy3.png"
            }else if (selectObj.value=="4"){
                imgObj.src="img/xy4.png"
            }
        }

        function changeImg(selectObj) {
            document.getElementById("faceImg").src=selectObj.value;
            document.getElementById("bodyObj").style.backgroundImage="url("+selectObj.value+")";
        }
    </script>
</head>
<body style="background-color: black" id="bodyObj">
<img src="img/xy7.png" width="300"  id="faceImg" style="margin-left: 200px; margin-top: 100px"><br>
<!--onchange() 表示当下拉框 选项发生变化时，触发的事件。-->
<select id="faceSelect" style="margin-left: 300px" onchange="changeImg(this)">
    <option value="img/xy7.png">泫雅</option>
    <option value="img/xy2.png">green泫雅</option>
    <option value="img/xy3.png">red泫雅</option>
    <option value="img/xy4.png">yellow泫雅</option>
</select>
</body>
</html>